
<template>
  <div>
    <el-row>
      <span>账单管理</span>
      <el-input style="width:100px;"></el-input>
      <el-button @click="toggleSelection('toggleRowSelection')">查询</el-button>
      <el-button @click="toggleSelection('clearSelection')">编辑</el-button>
      <el-button @click="disabledPage">{{disabled ? '激活' : '禁用'}}催收</el-button>
    </el-row>
    <ty-table :disabled="disabled" :sizes="[100,200,300,400]" ref="table" selection :size="size" 
        :page="page" @page-change="pageChange" @size-change="sizeChange" :total="total" :columns="columns" :data="rows">
      <template slot-scope="scope">
        <div v-if="scope.column.custom === 'handle'">
          <el-button icon="el-icon-search" size="mini">详情</el-button>
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="success" icon="el-icon-check" size="mini">催收</el-button>
          <el-button type="info" icon="el-icon-message" size="mini">删除</el-button>
          <el-button type="warning" icon="el-icon-star-off" size="mini">支付截图</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">催收记录</el-button>
        </div>
      </template>
    </ty-table>
  </div>
</template>

<script>
  import { login } from "@/api/common";
  import TyTable from '@/components/table/tyTable'

  export default {
    name: "bill",
    components: { TyTable },
    data() {
      return {
        size: 30,
        page: 1,
        total: 200,
        disabled: false,
        columns: [
          { label: "楼栋", prop: "building" },
          { label: "房间", prop: "room" },
          { label: "租客姓名", prop: "name", tooltip: true },
          { label: "电话", prop: "", },
          { label: "账期", prop: "", },
          { label: "类型", prop: "", },
          { label: "金额", prop: "", },
          { label: "状态", prop: "", },
          { label: "提醒", prop: "", },
          { label: "催收次数", prop: "", },
          { label: "备注", prop: "", },
          { label: "缴费", prop: "", },
          { label: "操作", prop: "handle", custom: "handle", width: 350 }
        ],
        rows: [{
          building: "B2155",
          name: "王小虎",
          room: "1206"
        }],
      }
    },
    mounted() {
    },
    methods: {
      // 显示页数发生变化
      pageChange({pageNumber}) {
        console.log(pageNumber)
        this.page = pageNumber;
      },
      // 显示条数发生变化
      sizeChange({pageSize}) {
        // console.log(pageSize);
        this.page = 1;
        this.size = pageSize;
      },
      // 切换选中状态
      toggleSelection(type) {
        if (type === 'toggleRowSelection') {
          this.$refs.table.tableMethods(type,this.data[1])
        } else {
          this.$refs.table.tableMethods(type)
        }
      },
      // 禁用|激活page
      disabledPage() {
        this.disabled = !this.disabled;
      }
    }
  }
</script>

<style scoped>

</style>
  